<template>
  <!-- 客户标签调整页面 -->
  <section class="page customer-label-adjustment">
    <data-form :model="model" :page="pageService" @onSearch="refreshData">
      <template slot="inputs">
        <el-form-item label="客户ID" prop="personalId">
          <el-input v-model.trim="model.personalId"></el-input>
        </el-form-item>
        <el-form-item label="修改人代号" prop="agentName">
          <el-input v-model.trim="model.agentName"></el-input>
        </el-form-item>
        <el-form-item label="复核人代号" prop="reviewerName">
          <el-input v-model.trim="model.reviewerName"></el-input>
        </el-form-item>
        <el-form-item label="审核状态" prop="applyStatus">
          <el-select clearable placeholder="请选择" v-model="model.applyStatus">
            <el-option
              :key="index"
              :label="name"
              :value="code"
              v-for="{ index, name, code } in $dict.getDictData('ApplyStatus')"
            ></el-option>
          </el-select>
        </el-form-item>
      </template>
    </data-form>
    <data-box
      :data="dataSet"
      :page="pageService"
      :sort="sortService"
      @onPageChange="refreshData"
    >
      <template slot="buttons">
        <el-button @click="onClickSingle">单笔调整</el-button>
        <el-button @click="onClickBatch">批量调整</el-button>
        <el-button @click="onClickexport">下载模版</el-button>
      </template>
      <template slot="columns">
        <el-table-column label="操作" :min-width="$helper.getColumnWidth(3)">
          <template slot-scope="scope">
            <el-button @click="onClickDetail(scope.row)" type="text"
              >查看</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="personalId"
          label="客户ID"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="addTagNames"
          label="新增标签"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(6)"
        >
        </el-table-column>
        <el-table-column
          prop="delTagNames"
          show-overflow-tooltip
          label="释放标签"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="agentCode"
          show-overflow-tooltip
          label="修改人代号"
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="maintainDate"
          show-overflow-tooltip
          label="修改时间"
          :formatter="row => $filter.dateTimeFormat(row.maintainDate)"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="reviewerCode"
          show-overflow-tooltip
          label="复核人代号"
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="reviewerDate"
          show-overflow-tooltip
          label="复核时间"
          :formatter="row => $filter.dateTimeFormat(row.reviewerDate)"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="applyStatus"
          show-overflow-tooltip
          label="审核状态"
          :min-width="$helper.getColumnWidth(3)"
          :formatter="
            row => $filter.dictConvert(row.applyStatus, 'ApplyStatus')
          "
        >
        </el-table-column>
        <el-table-column
          prop="note"
          label="注记"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
      </template>
    </data-box>

    <!-- 单笔调整 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialog.single"
      title="单笔调整"
      :close-on-press-escape="false"
      append-to-body
      @open="
        $nextTick(() => {
          $refs['single-adjustment'].getAllCTList('CT');
        })
      "
    >
      <single-adjustment
        @close="dialog.single = false"
        @refreshData="refreshData"
        ref="single-adjustment"
        :tagType="tagType"
        :row="row"
      />
    </el-dialog>

    <!-- 批量调整 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialog.caseExcelImport"
      title="批量调整"
      :close-on-press-escape="false"
      append-to-body
    >
      <case-excel-import-new
        @close="dialog.caseExcelImport = false"
        @success="refreshData"
        :submitType="submitType"
        ref="case-excel-import-new"
      ></case-excel-import-new>
    </el-dialog>

    <!-- 查看 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="isDetail"
      title="查看客户标签调整记录"
      :close-on-press-escape="false"
      append-to-body
    >
      <single-adjusment-detail :row="row" @close="isDetail = false" />
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies, Layout, Auth } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import SingleAdjustment from "~/components/customer-group-management/single-adjustment.vue";
import CaseExcelImportNew from "~/components/common/case-excel-import-new.vue";
import { CustomerGroupManageService } from "~/services/domain-service/customer-group-manage.service";
import { importMenuType } from "~/config/enum.config";
import SingleAdjusmentDetail from "~/components/customer-group-management/single-adjusment-detail.vue";

@Auth(2336)
@Layout("workspace")
@Component({
  components: {
    SingleAdjustment,
    CaseExcelImportNew,
    SingleAdjusmentDetail
  }
})
export default class CustomerLabelAdjustment extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CustomerGroupManageService)
  private customerGroupManageService: CustomerGroupManageService;

  private dataSet: any[] = [];
  private submitType = importMenuType.coustomerTag;
  private dialog = {
    single: false,
    caseExcelImport: false
  };
  private model: any = {
    personalId: "",
    agentName: "",
    reviewerName: ""
  };
  private isDetail: boolean = false;
  private tagType: string = "";
  private row: any = {};

  private mounted() {
    this.refreshData();
  }

  private refreshData() {
    this.customerGroupManageService
      .findAllPersonalTagAdjustApply(this.paramsHandler(), this.pageService)
      .subscribe(data => {
        this.dataSet = data;
      });
  }

  private paramsHandler() {
    const params = { ...this.model };
    return params;
  }

  /**
   * 单笔调整
   */
  private onClickSingle() {
    this.dialog.single = true;
    this.tagType = "CT";
    this.$nextTick(() => {
      const form: any = this.$refs["single-adjustment"];
      form.isShow = false;
      form.model.note = "";
      form.searchModel.personalId = "";
    });
  }

  private onClickDetail(row) {
    this.isDetail = true;
    this.row = {
      ...row,
      delTagNamesArr: (row.delTagNames && row.delTagNames.split(",")) || [],
      addTagNamesArr: (row.addTagNames && row.addTagNames.split(",")) || [],
      tagType: "ct"
    };
  }

  /**
   * 批量
   */
  private onClickBatch() {
    this.dialog.caseExcelImport = true;
  }

  /**
   * 下载
   */
  private onClickexport() {
    this.customerGroupManageService
      .downloadPersonalTemplate()
      .subscribe(data => {
        this.$common.downloadFile(data, "客户层标签批量调整模版.xlsx");
      });
  }
}
</script>

<style lang="less" scoped></style>
